<template>
    <div id="Reserve">
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>疫苗管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 预约记录卡片区 -->
        <el-card class="box-card">
            <el-form :inline="true" :model="queryMap" :rules="showFormRules" ref="showFormRef">
                <!-- 输入框 -->
                <el-input clearable @clear="searchAll"
                            style="width: 250px;margin-left: 10px;margin-right:10px"
                            type="text"
                            v-model="queryMap.realName"
                            @keydown.enter.native="searchByName"
                            placeholder="输入预约人名称模糊搜索..."
                            prefix-icon="el-icon-search"></el-input>
                <el-form-item label="预约时间" label-width="80px">
                    <el-date-picker
                    v-model="queryMap.reservationDate"
                    align="right"
                    type="date"
                    @change="search"
                    placeholder="选择日期"
                    style="width:160px;">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" size="small"  @click="searchAll">搜索全部</el-button>
                <!-- 高级搜索按钮 -->
                <el-button type="primary" size="small" @click="clickAdvanceSearchBtn">
                    <i class="el-icon-info" style="margin-right: 5px" aria-hidden="true"></i>高级搜索</el-button>
                <el-button
                        type="success"
                        icon="el-icon-circle-plus-outline"
                        v-hasPermission="'reservate:add'"
                        size="small"
                        @click="addDialogVisible=true"
                >添加</el-button>
                <!-- 搜索条件 -->
                <el-dialog title="高级搜索预约信息" width="75%"  @close="closeAdvanceSearchDialog" :visible.sync="showAdvanceSearch" >
                    <el-row>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <el-form-item label="预约人名称" label-width="105px">
                                    <el-input v-model="queryMap.realName" style="width:160px;" clearable placeholder="输入预约人名称查询"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="疫苗名称" label-width="85px">
                                <el-input v-model="queryMap.vaccineName" style="width:160px;" clearable placeholder="输入疫苗名称查询"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="预约时间" label-width="80px" prop="reservationDate">
                                <el-date-picker
                                v-model="queryMap.reservationDate"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                style="width:160px;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="接种点名称" label-width="85px">
                                <el-input v-model="queryMap.vaccSiteName" style="width:160px;" clearable placeholder="输入接种点名称查询"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 第二行 -->
                    <el-row style="margin-top:20px">
                        <el-col :span="6">
                            <el-form-item label="疫苗等级" label-width="85px">
                                <el-select
                                        clearable
                                        style="width:160px;"
                                        v-model="queryMap.vaccDegree"
                                        placeholder="请选择等级"
                                >
                                    <el-option
                                            v-for="degree in vaccDeg"
                                            :label="degree.label"
                                            :key="degree.id"
                                            :value="degree.id"
                                    >
                                        <span style=" color: #000; font-size: 13px">
                                            <el-tag size="small" style="margin-left:10px;width:60px;text-align:center;"  effect="dark" type="primary">
                                            {{ degree.label }}
                                            </el-tag>
                                            疫苗
                                        </span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="疫苗类别" label-width="85px" >
                                <el-select
                                        clearable
                                        style=" width:160px;"
                                        v-model="queryMap.vaccineType"
                                        placeholder="请选择疫苗类别"
                                >
                                    <el-option
                                        v-for=" vaccType in vaccineTypes "
                                        :label="vaccType.type"
                                        :key="vaccType.id"
                                        :value="vaccType.id"
                                    >
                                        <span style="margin-left:10px; color: #ED2C2A;">
                                            <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                            {{ vaccType.type }}
                                            </el-tag>
                                        </span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="预约时间" label-width="85px">
                                <el-radio-group style="margin-left:10px" v-model="queryMap.reservationTime">
                                    <el-radio :label="1">上午</el-radio>
                                    <el-radio :label="2">下午</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="预约针数" label-width="80px">
                                <el-select
                                        clearable
                                        style=" width:165px;"
                                        v-model="queryMap.vaccineNeedle"
                                        placeholder="请选择针数"
                                >
                                    <el-option
                                            v-for="needle in needles"
                                            :label="needle"
                                            :key="needle"
                                            :value="needle"
                                    >
                                        <span style=" color: #ED2C2A; font-size: 15px">
                                            <el-tag size="small" style="margin-left:15px;width:90px;text-align:center;"  effect="dark" type="primary">
                                            {{ needle }}针
                                            </el-tag>
                                        </span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 第三行 -->
                    <el-row style="margin-top:20px">
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light">
                                <el-form-item label="接种人性别" label-width="85px">
                                    <el-radio-group style="margin-left:10px" v-model="queryMap.sex">
                                    <el-radio :label="1">男</el-radio>
                                    <el-radio :label="0">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="接种人区域" label-width="85px">
                                <el-input v-model="queryMap.vaccinatorArea" style="width:160px;" clearable placeholder="接种人所属区域查询"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="预约人地址" label-width="85px">
                                <el-input v-model="queryMap.vaccinatorAddress" style="width:160px;" clearable placeholder="接种人详细地址查询"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="接种点区域" label-width="85px">
                                <el-input v-model="queryMap.vaccSiteArea" style="width:160px;" clearable placeholder="接种点所属区域查询"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- 第四行 -->
                    <el-row style="margin-top:20px">
                        <el-col :span="8">
                            <el-form-item label="接种人是否有过敏史" label-width="140px">
                                <el-radio-group v-model="queryMap.allergy">
                                    <el-radio :label="1">有</el-radio>
                                    <el-radio :label="2">无</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="接种人身体状况" label-width="120px">
                                <el-radio-group  v-model="queryMap.health">
                                    <el-radio :label="1">健康</el-radio>
                                    <el-radio :label="0">亚健康</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="接种点详细地址" label-width="110px">
                                <el-input v-model="queryMap.vaccSiteAddress" style="width:230px;" clearable placeholder="输入接种点详细地址查询"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <span slot="footer" class="dialog-footer">
                        <el-button style="margin-right:30px;width:150px;" @click="showAdvanceSearch = false">取 消</el-button>
                        <el-button
                                type="primary"
                                @click="searchByConditions"
                                style="width:150px;margin-right:40px;"
                                :loading="btnLoading"
                                :disabled="btnDisabled"
                        >确 定</el-button>
                    </span>
                </el-dialog>
            </el-form>

            <!-- 表格区域 -->
            <template>
                <el-table
                        border
                        size="mini"
                        v-loading="loading"
                        stripe
                        :header-cell-style="{textAlign: 'center'}"
                        :cell-style="{ textAlign: 'center' }"
                        :data="reservationData"
                        style="width: 100%;"
                        height="470"
                >
                    <el-table-column type="index" fixed="left" label="序号" width="50"></el-table-column>
                    <el-table-column prop="realName" fixed="left" label="预约人名称" width="90"></el-table-column>
                    <el-table-column prop="sex" fixed="left" label="性别" width="60">
                        <template slot-scope="scope">
                            <el-tag size="small" type="primary" v-if="scope.row.sex===1">男</el-tag>
                            <el-tag size="small"  type="warning" v-else>女</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="allergy" label="过敏史" width="60">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="danger" v-if="scope.row.allergy === true">有</el-tag>
                            <el-tag size="small" effect="dark" type="primary" v-else>无</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="health" label="身体健康" width="75">
                        <template slot-scope="scope">
                            <el-tag size="small" type="primary" v-if="scope.row.health === true">健康</el-tag>
                            <el-tag size="small"  effect="dark"  type="danger" v-else>亚健康</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reservationDate" label="预约日期" width="110" sortable></el-table-column>
                    <el-table-column prop="health" label="预约时间" width="75">
                        <template slot-scope="scope">
                            <el-tag size="small" type="success" v-if="scope.row.reservationTime===1">上午</el-tag>
                            <el-tag size="small" type="success" v-else>下午</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="health" label="预约状态" width="100">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="danger" v-if="scope.row.states===0">预约未受理</el-tag>
                            <el-tag size="small" type="primary" v-if="scope.row.states===1">已受理</el-tag>
                            <el-tag size="small" type="info" v-else-if="scope.row.states===2">接种待留观</el-tag>
                            <el-tag size="small" type="success" v-else-if="scope.row.states===3">接种完成</el-tag>
                            <el-tag size="small" effect="dark" type="danger" v-else-if="scope.row.states=== -1">预约过期</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vaccineName" label="预约疫苗名称" width="150"></el-table-column>
                    <el-table-column prop="vaccDegree" label="疫苗等级" width="70">
                        <template slot-scope="scope">
                            <el-tag size="small" effect="plain" v-if="scope.row.vaccDegree == 1" type="success">甲类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 2" type="success">乙类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 3" type="success">丙类</el-tag>
                            <el-tag size="small" effect="plain" v-else-if="scope.row.vaccDegree == 4" type="success">丁类</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="supplierName" label="疫苗提供商" width="150"></el-table-column>
                    <el-table-column prop="vaccineType" label="疫苗类别" width="120">
                        <template slot-scope="scope">
                            <div  v-for="vacctype in vaccineTypes" :key="vacctype.id" >
                                <el-tag size="small" v-if="scope.row.vaccineType == vacctype.id">{{vacctype.type}}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="totalNeedle" label="疫苗注射总针数" width="110"></el-table-column>
                    <el-table-column prop="vaccineNeedle" label="预约第几针" width="105" sortable>
                        <template slot-scope="scope">
                            <el-tag size="small" effect="dark" type="success">{{scope.row.vaccineNeedle}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="vaccSiteName" label="预约接种点名称" width="160"></el-table-column>
                    <el-table-column label="预约的接种点信息">
                        <el-table-column
                                prop="area"
                                label="省份"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccSiteArea.split('-')[0]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="市"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccSiteArea.split('-')[1]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="区县"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccSiteArea.split('-')[2]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column 
                            prop="vaccSiteAddress" 
                            label="接种点详细地址" 
                            width="180">
                        </el-table-column>
                        <el-table-column prop="vaccSitePhone" label="接种点电话" width="110"></el-table-column>
                    </el-table-column>
                    <el-table-column label="预约人其他基本信息">
                        <el-table-column
                                prop="area"
                                label="省份"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccinatorArea.split('-')[0]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="市"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccinatorArea.split('-')[1]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="区县"
                                width="100">
                            <template slot-scope="scope">
                                <span v-text="scope.row.vaccinatorArea.split('-')[2]"></span>
                            </template>
                        </el-table-column>
                        <el-table-column 
                            prop="vaccinatorAddress" 
                            label="详细住址" 
                            width="180">
                        </el-table-column>
                        <el-table-column prop="vaccinatorPhone" label="预约人电话" width="110"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="remark" label="预约人备注信息" width="150"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <template slot-scope="scope">
                            <el-popover
                                placement="left-start"
                                title="手机查看预约信息"
                                width="180"
                                trigger="click">
                                <img :src="image" draggable="false" alt width="140px;" style="cursor: pointer;margin-left:20px;" />
                                <i class="el-icon-mobile-phone" slot="reference" @click="showQR(scope.row.id)" style="cursor: pointer;margin: 10px 10px 0px 10px;float:left;"></i>
                            </el-popover>
                            
                            <el-button
                                    v-hasPermission="'reservate:edit'"
                                    type="text"
                                    size="mini"
                                    icon="el-icon-view"
                                    @click="showRecord(scope.row.id)"
                            >查看</el-button>
                            <el-button
                                    v-hasPermission="'reservate:accept'"
                                    type="text"
                                    v-if="scope.row.states === 0"
                                    size="mini"
                                    icon="el-icon-edit"
                                    @click="acceptRecord(scope.row.id)"
                            >受理</el-button>
                            <el-button type="text" v-hasPermission="'reservate:cancel'" icon="el-icon-delete" size="small" v-if="scope.row.states === 1 || scope.row.states === 0"  @click="del(scope.row.id)">取消</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

            <!-- 查看对话框 -->
            <el-dialog :title="showTitle" :visible.sync="showDialogVisible" width="70%"  @close="closeshowDialog">
                <span>
                    <el-form
                            :model="showForm"
                            label-width="80px"
                            class="demo-ruleForm"
                    >
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="预约人名称" label-width="85px">
                                    <el-input v-model="showForm.realName" style="width:170px;" disabled placeholder="输入预约人名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="疫苗名称" label-width="85px">
                                    <el-input v-model="showForm.vaccineName" disabled style="width:170px;" placeholder="输入疫苗名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="预约时间" label-width="80px">
                                    <el-date-picker
                                    disabled
                                    v-model="showForm.reservationDate"
                                    align="right"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width:160px;">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="接种点名称" label-width="85px">
                                    <el-input v-model="showForm.vaccSiteName" style="width:170px;" disabled placeholder="输入接种点名称查询"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 第二行 -->
                        <el-row style="margin-top:10px">
                            <el-col :span="6">
                                <el-form-item label="疫苗等级" label-width="85px">
                                    <el-select
                                            disabled
                                            style="width:170px;"
                                            v-model="showForm.vaccDegree"
                                            placeholder="请选择等级"
                                    >
                                        <el-option
                                                v-for="degree in vaccDeg"
                                                :label="degree.label"
                                                :key="degree.id"
                                                :value="degree.id"
                                        >
                                            <span style=" color: #000; font-size: 13px">
                                                <el-tag size="small" style="margin-left:10px;width:60px;text-align:center;"  effect="dark" type="primary">
                                                {{ degree.label }}
                                                </el-tag>
                                                疫苗
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="疫苗类别" label-width="85px" >
                                    <el-select
                                            disabled
                                            style=" width:135px;"
                                            v-model="showForm.vaccineType"
                                    >
                                        <el-option
                                            v-for="vaccType in vaccineTypes"
                                            :label="vaccType.type"
                                            :key="vaccType.id"
                                            :value="vaccType.id"
                                        >
                                            <span style="margin-left:10px; color: #ED2C2A;">
                                                <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                {{ vaccType.type }}
                                                </el-tag>
                                            </span>
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="预约时间" label-width="85px">
                                    <el-radio-group  style="margin-left:10px" v-model="showForm.reservationTime">
                                        <el-radio disabled :label="1">上午</el-radio>
                                        <el-radio disabled :label="2">下午</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="预约针数" label-width="85px">
                                    <el-input v-model="showForm.vaccineNeedle" style="width:170px;" disabled ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 第三行 -->
                        <el-row style="margin-top:10px">
                            <el-col :span="8">
                                <div class="grid-content bg-purple-light">
                                    <el-form-item label="接种人性别" label-width="130px">
                                        <el-radio-group style="margin-left:10px" v-model="showForm.sex">
                                        <el-radio disabled :label="1">男</el-radio>
                                        <el-radio disabled :label="0">女</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="接种人是否有过敏史" label-width="150px">
                                    <el-radio-group v-model="showForm.allergy">
                                        <el-radio disabled :label="true">有</el-radio>
                                        <el-radio disabled :label="false">无</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="接种人身体状况" label-width="120px">
                                    <el-radio-group  v-model="showForm.health">
                                        <el-radio disabled :label="true">健康</el-radio>
                                        <el-radio disabled :label="false">亚健康</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- 第四行 -->
                        <el-row style="margin-top:10px">
                            <el-col :span="12">
                                <el-form-item label="接种人所在区域" label-width="140px">
                                    <el-input v-model="showForm.vaccinatorArea" style="width:300px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="预约人详细地址" label-width="130px">
                                    <el-input v-model="showForm.vaccinatorAddress" style="width:300px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top:10px">
                            <el-col :span="12">
                                <el-form-item label="接种点所在区域" label-width="140px">
                                    <el-input v-model="showForm.vaccSiteArea" style="width:300px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="接种点详细地址" label-width="130px">
                                    <el-input v-model="showForm.vaccSiteAddress" style="width:300px;" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </span>
                <span slot="footer" style="text-align:center;" class="dialog-footer">
                    <el-button @click="showDialogVisible = false" style="margin-right:50px;width:180px">取 消</el-button>
                    <el-button type="primary" v-if="showForm.states === 0" style="margin-right:50px;width:180px" @click="submitRecord(showForm.id)">受理</el-button>
                </span>
            </el-dialog>

            <!-- 分页 -->
            <el-pagination
                    style="margin-top:10px;"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.queryMap.pageNum"
                    :page-sizes="[ 8, 15, 20, 30]"
                    :page-size="this.queryMap.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>

            <!-- 添加对话框 -->
            <el-dialog title="添加新的疫苗预约信息" :visible.sync="addDialogVisible" width="70%"  @close="closeAddDialog">
                <span>
                    <el-form
                            :model="addForm"
                            :rules="addFormRules"
                            ref="addFormRef"
                            label-width="80px"
                            class="demo-ruleForm"
                    >
                        <div class="addStyle">
                            <el-row>
                                <el-col :span="7">
                                    <el-form-item label="接种人名称" label-width="95px" prop="reservatorId">
                                        <el-select v-model="addForm.reservatorId" clearable placeholder="请选择预约人信息">
                                            <el-option
                                                    v-for="vaccinator in vaccinators"
                                                    :key="vaccinator.id"
                                                    :label="vaccinator.realName"
                                                    :value="vaccinator.id"
                                                    @click.native="getSelectChangeforAdd(vaccinator)" >
                                                    <span style="float: left;">{{ vaccinator.realName }}</span>
                                                    <span style="margin-left:10px;float: right; color: #ED2C2A;">
                                                        <el-tag size="small" style="width:30px;" v-if="vaccinator.sex === 1" effect="dark" type="primary">男</el-tag>
                                                        <el-tag size="small" style="width:30px;" v-else effect="dark" type="danger">女</el-tag>
                                                    </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="接种人所在区域" label-width="120px" style="margin-left:10px;">
                                        <el-input v-model="tempVaccinator.area" disabled style="width:300px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="接种人身体状况" label-width="150px" style="margin-left:20px;">
                                        <el-radio-group  v-model="tempVaccinator.health">
                                            <el-radio disabled :label="true">健康</el-radio>
                                            <el-radio disabled :label="false">亚健康</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="7">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="接种人性别" label-width="95px">
                                            <el-radio-group style="margin-left:10px" v-model="tempVaccinator.sex">
                                            <el-radio style="margin-left:15px" disabled :label="1">男</el-radio>
                                            <el-radio disabled :label="0">女</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="9">
                                    <el-form-item label="接种人详细住址" label-width="120px" style="margin-left:10px;">
                                        <el-input v-model="tempVaccinator.address" disabled style="width:300px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="接种人是否有过敏史" label-width="160px" style="margin-left:40px;">
                                        <el-radio-group v-model="tempVaccinator.allergy">
                                            <el-radio style="margin-left:10px" disabled :label="true">有</el-radio>
                                            <el-radio disabled :label="false">无</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="addStyle">
                            <el-row style="margin-top:10px">
                                <el-col :span="7">
                                    <el-form-item label="接种点名称" label-width="95px" prop="vaccSiteId">
                                        <el-select v-model="addForm.vaccSiteId" clearable placeholder="请选择接种点信息">
                                            <el-option
                                                    v-for="vaccSite in vaccSites"
                                                    :key="vaccSite.id"
                                                    :label="vaccSite.vaccSiteName"
                                                    :value="vaccSite.id"
                                                    @click.native="getVaccSiteSelectChangeforAdd(vaccSite)" >
                                                    <span style="float: left;">{{ vaccSite.vaccSiteName }}</span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="所在区域" label-width="90px">
                                        <el-input v-model="tempVaccSite.area" style="width:295px;" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="详细地址" label-width="120px">
                                        <el-input v-model="tempVaccSite.address" style="width:260px;" disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="addStyle">
                            <el-row style="margin-top:10px">
                                <el-col :span="7">
                                    <el-form-item label="接种点疫苗" label-width="95px" prop="vaccineId">
                                        <el-select v-model="addForm.vaccineId" clearable placeholder="请选择接种点疫苗信息">
                                            <el-option
                                                    v-for="selectVaccine in vaccinesInSiteData"
                                                    :key="selectVaccine.id"
                                                    :label="selectVaccine.vaccineName"
                                                    :value="selectVaccine.id"
                                                    @click.native="getVaccSelectChangeforAdd(selectVaccine)" >
                                                    <span style="float: left;">{{ selectVaccine.vaccineName }}</span>
                                                    <span style="margin-left:20px;float: right; color: #ED2C2A;">
                                                        <el-tag size="small" style="width:60px;text-align:center;" v-if="selectVaccine.count >= 100" effect="dark" type="primary">{{ selectVaccine.count }}</el-tag>
                                                        <el-tag size="small" style="width:60px;text-align:center;" v-else effect="dark" type="danger">{{ selectVaccine.count }}</el-tag>
                                                    </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="疫苗类别" label-width="90px">
                                        <el-select
                                                disabled
                                                style=" width:155px;"
                                                v-model="tempVaccineInSite.vaccineType"
                                                placeholder="请选择疫苗类别"
                                        >
                                            <el-option
                                                v-for="vaccType in vaccineTypes"
                                                :label="vaccType.type"
                                                :key="vaccType.id"
                                                :value="vaccType.id"
                                            >
                                                <span style="margin-left:10px; color: #ED2C2A;">
                                                    <el-tag size="small" style="width:100px;text-align:center;"  effect="dark" type="primary">
                                                    {{ vaccType.type }}
                                                    </el-tag>
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="注射总针数" label-width="110px">
                                            <el-input v-model="tempVaccineInSite.totalNeedle" disabled style="width:80px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="疫苗等级" style="margin-left:10px">
                                        <el-select
                                                disabled
                                                style=" width:160px;"
                                                v-model="tempVaccineInSite.vaccDegree"
                                                placeholder="请选择等级"
                                        >
                                            <el-option
                                                    v-for="degree in vaccDeg"
                                                    :label="degree.label"
                                                    :key="degree.id"
                                                    :value="degree.id"
                                            >
                                                <span style="margin-left:10px; color: #000; font-size: 13px">
                                                    <el-tag size="small" style="width:50px;text-align:center;margin-right:5px"  effect="dark" type="primary">
                                                    {{ degree.label }}
                                                    </el-tag>
                                                    疫苗
                                                </span>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="预约时间" label-width="95px" prop="reservationDate">
                                        <el-date-picker
                                            v-model="addForm.reservationDate"
                                            :picker-options="pickerOptions0"
                                            align="left"
                                            type="date"
                                            placeholder="选择日期"
                                            style="width:205px;">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="预约时间" label-width="120px" prop="reservationTime" style="margin-left:50px;">
                                        <el-radio-group v-model="addForm.reservationTime">
                                            <el-radio label="1" border>上午</el-radio>
                                            <el-radio label="2" border>下午</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="预约疫苗针数" label-width="115px" prop="vaccineNeedle" style="margin-left:40px;">
                                            <el-select
                                                    clearable
                                                    style=" width:180px;"
                                                    align="center"
                                                    v-model="addForm.vaccineNeedle"
                                                    placeholder="请选择针数"
                                            >
                                                <el-option
                                                        v-for="needle in tempVaccineInSite.totalNeedle"
                                                        :label="needle"
                                                        :key="needle"
                                                        :value="needle"
                                                >
                                                    <span style="margin-left:10px; color: #ED2C2A;">
                                                        <el-tag size="small" style="width:120px;text-align:center;"  effect="dark" type="primary">
                                                        第 {{ needle }} 针
                                                        </el-tag>
                                                    </span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </span>
                <span slot="footer" style="text-align:center;" class="dialog-footer">
                    <el-button @click="addDialogVisible = false" style="margin-right:50px;width:180px">取 消</el-button>
                    <el-button 
                        type="primary" 
                        style="margin-right:50px;width:180px" 
                        @click="addRecord" 
                        :loading="btnLoading"
                        :disabled="btnDisabled">提交预约</el-button>
                </span>
            </el-dialog>

        </el-card>
    </div>
</template>

<script>
    import moment from 'moment';
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn');
    export default {
        data() {
            return {
                btnLoading: false,
                btnDisabled: false,
                loading:true,
                dialogwidth:"75%",
                showDialogVisible: false,
                addDialogVisible: false, //添加弹框是否显示
                total: 0, //总共多少条数据
                reservationData: [], //表格数据
                needles:[1,2,3,4,5],  //预约的针数
                vaccDeg:[{id:1,label:"甲类"},{id:2,label:"乙类"},{id:3,label:"丙类"},{id:4,label:"丁类"}],  //疫苗等级
                vaccineTypes:[{id:1,type:"减毒活疫苗"},{id:2,type:"灭活疫苗"},{id:3,type:"基因重组疫苗"}],  //疫苗等级
                showAdvanceSearch: false, // 展示高级搜索
                vaccinators:[], // 所有接种人信息
                vaccSites:[],  // 所有接种点信息
                // 中间数据
                tempVaccinator:{},
                tempVaccSite:{},
                tempVaccineInSite:{},
                //
                pickerOptions0: {
                    disabledDate: (time) => {
                        // 设置可选择的日期为今天之后的一个月内
                        const curDate = (new Date()).getTime()
                        // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
                        const day = 21 * 24 * 3600 * 1000
                        const dateRegion = curDate + day
                        return time.getTime() < Date.now() - 8.64e7 ||  time.getTime() > dateRegion
                    }
                },
                queryMap: { 
                    pageNum: 1,
                    pageSize: 8,
                    // reservationDate: moment(new Date()).format('YYYY-MM-DD'),
                    reservationDate:"",
                    reservationTime:"",
                    vaccineNeedle:"",
                    realName:"",
                    sex:"",
                    health:"",
                    allergy:"",
                    vaccinatorArea:"",
                    vaccinatorAddress:"",
                    vaccineName: "",
                    vaccineType:"",
                    vaccDegree:"",
                    vaccSiteName:"",
                    vaccSiteArea:"",
                    vaccSiteAddress:""}, //查询对象
                queryAllMap:{
                    pageNum: 1,
                    pageSize: 8
                },
                addForm: {}, //添加表单数据
                showForm: {}, //查看表单数据
                vaccinesInSiteData: [], //该接种点下所有的疫苗信息
                showTitle:"", // 展示疫苗title
                image:"", //二维展示数据
                showFormRules: {
                    reservationDate:[
                        { type: 'date', required: true, message: "请选择预约的日期时间", trigger: "change" }
                    ]
                }, //添加验证
                addFormRules: {
                    vaccineNeedle:[
                        { required: true, message: "请选择疫苗注射总针数", trigger: "change" }
                    ],
                    reservatorId: [
                        { required: true, message: "请选择预约人信息", trigger: "change" }
                    ],
                    vaccSiteId: [
                        { required: true, message: "请选择要预约的接种点信息", trigger: "change" }
                    ],
                    vaccineId: [
                        { required: true, message: "请选择要预约的疫苗信息", trigger: "change" }
                    ],
                    reservationDate:[
                        { type: 'date', required: true, message: "请选择要预约的日期", trigger: "change" }
                    ],
                    reservationTime: [
                        { required: true, message: "请选择要预约的时间段", trigger: "change" }
                    ]
                } //添加验证
            };
        },
        methods: {
            /**
             * 展示QR预约二维码
             */
            async showQR(id){
                const { data: res } = await this.$http.get("business/reservate/get/" + id);
                if (res.code === 20000) {
                    var imgData = this.$QR.drawImg(JSON.stringify(res.data.result), {
                        typeNumber: 3,
                        errorCorrectLevel: 'M',
                        size: 500
                    })
                    // 返回输出base64编码imgData
                    this.image = imgData;
                } else {
                    return this.$message.error(res.message);
                }
            },
            //搜索
            search() {
                this.queryMap.pageNum = 1;
                this.queryMap.reservationDate = moment(this.queryMap.reservationDate).format('YYYY-MM-DD')
                this.getReservationList();
                this.reset();
            },
            //搜索全部
            async searchAll(){
                const { data: res } = await this.$http.get("business/reservate/findList", {
                    params: this.queryAllMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.reservationData = res.data.reservationRecords;
                } else {
                    this.reservationData =[];
                    return this.$message.error(res.message);
                }
            },
            //根据名字搜索全部预约信息
            async searchByName(){
                this.queryMap.reservationData = null;
                const { data: res } = await this.$http.get("business/reservate/findList", {
                    params: this.queryMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.reservationData = res.data.reservationRecords;
                } else {
                    this.reservationData =[];
                    return this.$message.error(res.message);
                }
            },
            //点击高级搜索按钮事件
            clickAdvanceSearchBtn(){
                this.queryMap.reservationDate = new Date()
                this.showAdvanceSearch = true;
            },
            // 条件搜索
            searchByConditions(){
                this.$refs.showFormRef.validate(valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.queryMap.pageNum = 1;
                        this.queryMap.reservationDate = moment(this.queryMap.reservationDate).format('YYYY-MM-DD')
                        this.getReservationList();
                        this.showAdvanceSearch = false
                        this.reset();
                    }
                });
            },
            /**
             * 重置
             */
            reset(){
                this.queryMap= {
                    pageNum: 1,
                    pageSize: 8,
                    reservationDate: '',
                    reservationTime:"",
                    vaccineNeedle:"",
                    realName:"",
                    sex:"",
                    health:"",
                    allergy:"",
                    vaccinatorArea:"",
                    vaccinatorAddress:"",
                    vaccineName: "",
                    vaccineType:"",
                    vaccDegree:"",
                    vaccSiteName:"",
                    vaccSiteArea:"",
                    vaccSiteAddress:""
                };
            },
            //展示疫苗预约
            async showRecord(id) {
                const { data: res } = await this.$http.get("business/reservate/get/" + id);
                if (res.code === 20000) {
                    this.showForm = res.data.result;
                    this.showTitle = "查看" +"【"+this.showForm.realName +"】"+"的预约记录"
                } else {
                    return this.$message.error(res.message);
                }
                this.showDialogVisible = true;
            },
            //添加
            addRecord() {
                this.$refs.addFormRef.validate(async valid => {
                    if (!valid) {
                        return;
                    } else {
                        this.btnLoading = true;
                        this.btnDisabled = true;
                        this.$refs.addFormRef.clearValidate();
                        this.addForm.reservationData = moment(this.addForm.reservationDate).format('YYYY-MM-DD')
                        const { data: res } = await this.$http.post(
                            "business/reservate/add",
                            this.addForm
                        );
                        if (res.success) {
                            this.$notify.success({
                                title:'操作成功',
                                message:'预约信息已添加成功!',
                            });
                            this.addForm = {};
                            await this.getReservationList();
                        } else {
                            this.btnLoading = false;
                            this.btnDisabled = false;
                            this.addDialogVisible = false;
                            this.closeAddDialog();
                            return this.$message.error(res.message);
                        }
                        this.btnLoading = false;
                        this.btnDisabled = false;
                        this.addDialogVisible = false;
                    }
                });
            },
            //展示弹出框提交按钮
            async submitRecord(id){
                this.acceptRecord(id);
                this.showDialogVisible = false
            },
            /**
             * 受理预约信息
             */
            async acceptRecord(id){
                const res = await this.$confirm(
                    "将要修改该预约申请状态，是否确认同意该预约申请？",
                    "提示",
                    {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "同意",
                        cancelButtonText: "禁止",
                        type: "warning"
                    }
                ).catch(res => {
                    if(res === 'cancel'){
                        this.del(id);
                    }
                    if(res === 'close'){
                        this.$message({
                            type: 'info',
                            message: '已取消受理预约信息!'
                        });
                    }
                });
                if (res === "confirm") {
                    this.btnLoading = true;
                    this.btnDisabled = true;
                    const { data: res } = await this.$http.get("business/reservate/accept/" + id);
                    if(res.success){
                        this.$notify.success({
                            title:'操作成功',
                            message:'预约信息受理成功！',
                        });
                        this.getReservationList();
                    }else {
                        this.$message.error(res.message);
                    }
                    this.btnLoading = false;
                    this.btnDisabled = false;
                }
            },
            /**
             * 加载所有预约人信息
             */
            async getAllVaccionator() {
                const { data: res } = await this.$http.get("business/reservate/findVaccinators");
                if(!res.success){
                    return this.$message.error(res.message);
                }
                this.vaccinators = res.data.vaccinators;
            },
            /**
             * 加载所有接种点信息
             */
            async getAllVaccSite() {
                const { data: res } = await this.$http.get("business/devolution/findAllVaccSites");
                if(!res.success){
                    return this.$message.error(res.message);
                }
                this.vaccSites = res.data.VaccSites;
            },
            //加载所有疫苗预约列表
            async getReservationList() {
                const { data: res } = await this.$http.get("business/reservate/findList", {
                    params: this.queryMap
                });
                if (res.code === 20000) {
                    this.total = res.data.total;
                    this.reservationData = res.data.reservationRecords;
                } else {
                    this.reservationData =[];
                    return this.$message.error(res.message);
                }
            },
            /**
             * 根据接种点id返回该接种点所有的疫苗
             */
            async getVaccinesBySiteId(id){
                const { data: res } = await this.$http.get("business/reservate/getVacc/" + id);
                if (res.code === 20000) {
                    this.vaccinesInSiteData = res.data.allVaccinesInSite.vaccines;
                } else {
                    this.vaccinesInSiteData =[];
                    return this.$message.error(res.message);
                }
            },
            /**
             * 删除余量为0的疫苗
             */
            async del(id) {
                const res = await this.$confirm(
                    "将删除该疫苗预约信息，会造成不可逆后果，是否确认继续删除?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除预约信息!"
                    });
                });
                if (res === "confirm") {
                    const { data: res } = await this.$http.delete("business/reservate/delete/" + id);
                    if(res.success){
                        this.$notify.success({
                            title:'操作成功',
                            message:'取消预约疫苗信息成功！',
                        });
                        this.getReservationList();
                    }else {
                        this.$message.error(res.message);
                    }
                }
            },
            //监听 添加时 select下拉框改变
            getSelectChangeforAdd(vaccinator){
                this.tempVaccinator = vaccinator;
            },
            //监听 添加时 接种点  select下拉框改变
            getVaccSiteSelectChangeforAdd(vaccSite){
                this.getVaccinesBySiteId(vaccSite.id);
                this.tempVaccSite = vaccSite;
            },
            //监听 添加时 接种点疫苗  select下拉框改变
            getVaccSelectChangeforAdd(selectVaccine){
                this.tempVaccineInSite = selectVaccine;
            },
            //改变页码
            handleSizeChange(newSize) {
                this.queryMap.pageSize = newSize;
                this.getReservationList();
            },
            //翻页
            handleCurrentChange(current) {
                this.queryMap.pageNum = current;
                this.getReservationList();
            },
            //关闭高级搜索弹出框
            closeAdvanceSearchDialog() {
                this.queryMap= {
                    pageNum: 1,
                    pageSize: 8,
                    reservationDate: moment(new Date()).format('YYYY-MM-DD'),
                    reservationTime:"",
                    vaccineNeedle:"",
                    realName:"",
                    sex:"",
                    health:"",
                    allergy:"",
                    vaccinatorArea:"",
                    vaccinatorAddress:"",
                    vaccineName: "",
                    vaccineType:"",
                    vaccDegree:"",
                    vaccSiteName:"",
                    vaccSiteArea:"",
                    vaccSiteAddress:""
                };
                this.$refs.showFormRef.clearValidate();
                this.$refs.showFormRef.resetFields();
            },
            //关闭查看弹出框
            closeshowDialog() {
                this.showForm = {};
            },
            //关闭添加弹出框
            closeAddDialog() {
                this.$refs.addFormRef.clearValidate();
                this.$refs.addFormRef.resetFields();
                this.addForm = {};
                this.tempVaccinator = {};
                this.tempVaccSite = {};
                this.vaccinesInSiteData =[];
                this.tempVaccineInSite = {};
            }
        },
        created() {
            this.getReservationList();
            this.getAllVaccionator();
            this.getAllVaccSite();
            setTimeout(() => {
                this.loading = false;
            }, 500);
        }
    };
</script>

<style>
    .el-popover__title{
        width: 175px;
        margin: 0 auto;
        font-weight: bold;
        text-align: center;
        height: 30px;
    }
    .el-dialog__footer{
        text-align: center;
    }
    .addStyle{
        border: 1px solid #409eff;
        border-radius: 5px;
        box-sizing: border-box;
        padding-top: 10px;
        margin-bottom: 10px;
    } 
</style>